// 找到用户输入数值的文本框
var text_input = document.querySelector('[type=text]');

// 根据id找到对应的两个select标签
var select1 = document.getElementById('length-unit1');
var select2 = document.getElementById('length-unit2');

// 找到所有的option,options指代的是所有的option标签，它是一个集合
var options = document.getElementsByTagName('option');

// 找到展示结果的div
var result_div = document.getElementById('result');

//options.length：获取到options集合中有多少个元素 
for(var i = 0;i < options.length;i++){
    // 根据索引从集合中找到对应的option标签
    var option = options[i];
    // 给option绑定点击事件
    option.onclick = function(){
        calc();
    }
}

// 给输入框绑定事件，输入框中的内容改变时的事件
text_input.oninput = function(){
    if(text_input.value == ''){
        result_div.innerText = '';
        return;
    }
    calc();
}

function calc(){
    // （1）获取输入框中 用户输入的数值
    var input_value = text_input.value;
    // (2)获取option中的value属性值
    // select1.selectedIndex:获取当前select标签选中的option的索引
    var index1 = select1.selectedIndex;
    var index2 = select2.selectedIndex;
    var option_value1 = options[index1].value;
    var option_value2 = options[index2].value;
    console.log(option_value1 +　"," +　option_value2);
    //(3)获取被选中的option中的文本内容（千米(km)）
    var option_text1 = options[index1].text;
    var option_text2 = options[index2].text;
    //(4)换算
    var result = input_value *　option_value1 / option_value2;
    // (5)将结果展示在页面中
    result_div.innerText = input_value +　option_text1 +　'=' +　result + option_text2;　
}